import React from 'react';
import { Button, Modal, Select, Form, Row, Col, Input, DatePicker, Radio, message, Tree } from 'antd';
import { connect } from 'dva';
import BaseComponent from '@/components/BaseComponent';
const { TreeNode } = Tree;

@connect(({ user }) => ({
    currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
    constructor(props) {
        super(props)
        this.state = {
            visible: false,
            treeData: [],
            checkedKeys: []

        }
    }

    showModal = () => {
        this.getBindVillagesList()
        this.echoBindCodes()
        this.setState({
            visible: true,
        });
    };

    handleOk = () => {
        this.saveBindList()
        this.setState({
            visible: false,
        });
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        });
    };

    //保存
    saveBindList = () => {
        console.log(this.props.record)
        const checkedKeys = this.state.checkedKeys.join('|');
        this.execHttp('bindVillage/saveBindList', {
            id: this.props.record.id,
            villageCodes: checkedKeys,
        }).then(resp => {
            if (resp && resp.success) {
                message.success(resp.message);
                this.props.listAllByPage();
            } else {
                message.error(resp.message);
            }
        });
    };


    /**详情*/
    getBindVillagesList = () => {
        if (this.props.record.region_code) {
            this.execHttp('bindVillage/getBindVillagesList', {
                areaCode: this.props.record.region_code
            }).then(resp => {
                if (resp && resp.success) {
                    this.setState({
                        treeData: resp.data,
                    });
                }
            });
        }
    };

    /**详情*/
    echoBindCodes = () => {
        this.execHttp('bindVillage/echoBindCodes', {
            id: this.props.record.id
        }).then(resp => {
            if (resp && resp.success) {
                console.log(resp)
                this.setState({
                    checkedKeys: resp.data.codes,
                });
            }
        });
    };


    onCheck = checkedKeys => {
        console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys });
    };


    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode title={item.name} key={item.code} dataRef={item}   >
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.code} title={item.name} />;
        });

    render() {
        const { visible, treeData, checkedKeys } = this.state;
        const color = 1 == 1 ? '#67c23a' : '#e6a23c';
        return (
            <div style={{ display: 'inline-block' }}>
                <Button
                    type="primary"
                    style={{ marginLeft: '10px', background: color, borderColor: color }}
                    onClick={this.showModal}
                    disabled={this.props.record.locked == 2}

                >
                    绑定村
                </Button>
                <Modal
                    title="绑定村信息"
                    visible={visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    width={1500}
                >
                    <Tree
                        checkable
                        onCheck={this.onCheck}
                        checkedKeys={checkedKeys}

                    >
                        {this.renderTreeNodes(treeData)}
                    </Tree>

                </Modal>
            </div>
        );
    }
}
